+section('Getting Started')

section
  :markdown-it
    It's recommended to install vue-treeselect via npm, and build your app using a bundler like [webpack](https://webpack.js.org/).

    ```bash
    npm install --save @riophae/vue-treeselect
    ```

  :markdown-it
    This example shows how to integrate vue-treeselect with your [Vue SFCs](https://vuejs.org/v2/guide/single-file-components.html).

    ```vue
    <!-- Vue SFC -->
    <template>
      <div id="app">
        <treeselect v-model="value" :multiple="true" :options="options" />
      </div>
    </template>

    <script>
      // import the component
      import Treeselect from '@riophae/vue-treeselect'
      // import the styles
      import '@riophae/vue-treeselect/dist/vue-treeselect.css'

      export default {
        // register the component
        components: { Treeselect },
        data() {
          return {
            // define the default value
            value: null,
            // define options
            options: [ {
              id: 'a',
              label: 'a',
              children: [ {
                id: 'aa',
                label: 'aa',
              }, {
                id: 'ab',
                label: 'ab',
              } ],
            }, {
              id: 'b',
              label: 'b',
            }, {
              id: 'c',
              label: 'c',
            } ],
          }
        },
      }
    </script>
    ```

    If you just don't want to use webpack or any other bundlers, you can simply include the standalone UMD build in your page. In this way, make sure Vue as a dependency is included before vue-treeselect.

    ```html
    <html>
      <head>
        <!-- include Vue 2.x -->
        <script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
        <!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
        <script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
      </head>
      <body>
        <div id="app">
          <treeselect v-model="value" :multiple="true" :options="options" />
        </div>
      </body>
      <script>
        // register the component
        Vue.component('treeselect', VueTreeselect.Treeselect)

        new Vue({
          el: '#app',
          data: {
            // define the default value
            value: null,
            // define options
            options: [ {
              id: 'a',
              label: 'a',
              children: [ {
                id: 'aa',
                label: 'aa',
              }, {
                id: 'ab',
                label: 'ab',
              } ],
            }, {
              id: 'b',
              label: 'b',
            }, {
              id: 'c',
              label: 'c',
            } ],
          },
        })
      </script>
    </html>
    ```
